<template>
	<section>
		<header class="bbtm rela wallfff" v-if="$store.state.Type">
			<a href="javascript: history.back()" class="_h">
				<i class="iconfont icon-Goback sz36"></i>
			</a>
			<h1 class="sz36 hue333 flex_core fontwt hei100">车险申报</h1>

		</header>
		<h1 class="hue666 sz30 centre pud30 fontwt">请拍摄实体身份证并录入信息</h1>
		<div class="dotted mlr30 p30  hei400  flexs ">
			<form enctype="multipart/form-data" name="form1" class="flex1 flexs rela">
				<input id="f1" class="flex1 opa0" type="file" name="f" @change="change" accept="image.png,image.jepg" />
				<img id="preview1" class="auto-m" src="../../assets/AutoInsuran/carid1.png" />
			</form>
		</div>
		<div class="dotted mlr30 p30  hei400  flexs mu30">
			<form enctype="multipart/form-data" name="form1" class="flex1 flexs rela">
				<input id="f2" class="flex1 opa0" type="file" name="f" @change="change" accept="image.png,image.jepg" />
				<img id="preview2" class="auto-m" src="../../assets/AutoInsuran/carid2.png" />
			</form>
		</div>

		<button type="button" class="btnm" @click="nexts">
			提交
		</button>

	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	export default {

		data() {
			return {

			}
		},
		beforeCreate() {

		},
		created() { 
			if(!this.$store.state.MembersID){
		  		 this.$router.push({path:'/LoginAll/ToLogin'}) 
		  	}
		},
		methods: {
			change: function(e) {
				let v = this;
				var ids = e.target.id;

				var pic = document.getElementById("preview" + ids.substring(ids.length - 1, ids.length)),
					file = document.getElementById(ids);

				var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();

				// gif在IE浏览器暂时无法显示
				if(ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
					alert("图片的格式必须为png或者jpg或者jpeg格式！");
					return;
				}
				html5Reader(file);

				function html5Reader(file) {
					var file = file.files[0];
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function(e) {
						pic.src = this.result;

						var formData = new FormData();
						formData.append("filename", "CarInsurance")
						formData.append("names", file);
						Indicator.open({
							text: '请求中，请稍等'
						});
						$.ajax({
							url: v.$store.state.urls + '/Common/v1.0/UploadImg',
							data: formData,
							type: 'POST',
							cache: false,
							processData: false,
							contentType: false,
							dataType: 'json',
							success: function(res) {
								Indicator.close();
								if(!res.Return_ID) {
									if(ids === "f1") {
										v.$parent.id1 = res.Return_Data;
									} else {
										v.$parent.id2 = res.Return_Data;
									}
								} else {
									Toast(res.Return_Mess)
								}
							},
							error: function(err) {
								Indicator.close();
							}
						});
					}
				}
			},
			nexts: function() {
				let v = this;

				if(v.$parent.id1 && v.$parent.id2) {

					Indicator.open({
						text: '请求中，请稍等'
					});
					this.$http.post("/WorkCarInsurance/V1.0/CarInsuranceApply", Qs.stringify({
						"MembersID": this.$store.state.MembersID,
						"IDCardNum": v.$parent.id,
						"IDCardName": v.$parent.name,
						"CarNum": v.$parent.numbers,
						"IDCardFront": v.$parent.id1,
						"IDCardVerso": v.$parent.id2,
						"DrivingLicenseFront": v.$parent.auto1,
						"DrivingLicenseVerso": v.$parent.auto2

					})).then((res) => {
						Indicator.close();
						Toast(res.data.Return_Mess);
						if(!res.data.Return_ID){
							v.$router.push("/autoinsuranAll/autoinsuran");
						}

					}).catch((err) => {
						Indicator.close();
						Toast(err);
					});
				} else {
					Toast("请选择格式为png/jpeg图片");
				}

			},

		}

	}
</script>

<style scoped>
	.dotted {
		border: 1px dashed #999;
		border-radius: 0.2666666666rem;
	}
	
	.hei400 {
		height: 5.3333333333rem;
	}
	
	.auto-m {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1; 
	}
	
	.mu50 {
		margin-top: 0.6666666666rem;
	}
</style>